<template>
  <div class="">
    <div class="phonebox">
      <img src="@/assets/images/phone.png" alt="" class="phone" />
      <div class="innerphone">
        <iframe
          :key="iphonekey"
          ref="iphone"
          id="iphone"
          :src="iframeUrl"
          width="100%"
          height="100%"
          frameborder="0"
          sandbox="allow-same-origin allow-top-navigation allow-scripts"
        ></iframe>
      </div>
    </div>
    <div class="mt_20 flexcenter">
      <el-button type="primary" plain icon="" @click="setUrl(iframeUrl)">刷新</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      // iframeUrl: "http://121.43.50.8:2306/h5/#/",
    };
  },
  computed: {
    ...mapGetters(["iframeUrl",'iphonekey']),
  },
  props: {
    activeId: {
      default: "",
    },
  },
  mounted() {
    // this.refreshFn(this.iframeUrl);
  },
  created(){
    this.setUrl(this.h5domain + "?id="+this.activeId+'&istest=1');
  },
  methods:{
    ...mapActions(["setUrl"]),
  }
};
</script>

<style lang="scss" scoped>
// .createleft{
//     padding-top: 50px;
// }
.phonebox {
  width: 360px;
  height: 660px;
  position: relative;
}
.phone {
  width: 360px;
  height: 100%;
}
.innerphone {
  position: absolute;
  top: 41px;
  left: 19px;
  right: 19px;
  bottom: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  // background-color: red;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  overflow: hidden;
}
.el-button {
  padding: 8px 30px;
}
</style>